<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频诊断工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .video-container {
            width: 100%;
            max-width: 800px;
            margin: 20px 0;
        }
        video {
            width: 100%;
            height: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .log {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            font-family: monospace;
            font-size: 12px;
            max-height: 300px;
            overflow-y: auto;
            white-space: pre-wrap;
        }
        .error {
            color: #dc3545;
            font-weight: bold;
        }
        .success {
            color: #28a745;
            font-weight: bold;
        }
        .warning {
            color: #ffc107;
            font-weight: bold;
        }
        .info {
            color: #17a2b8;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h1>视频播放诊断工具</h1>
    
    <div class="container">
        <h2>视频文件信息</h2>
        <div id="fileInfo">
            <p><strong>文件路径:</strong> D:\lan-video\d895a1d5-aded-4ffe-8087-6da01af4ddbc.mp4</p>
            <p><strong>文件大小:</strong> 394,175 字节 (约 385 KB)</p>
            <p><strong>最后修改:</strong> 2025/10/8 15:46</p>
        </div>
    </div>

    <div class="container">
        <h2>视频播放测试</h2>
        <div class="video-container">
            <video id="testVideo" controls preload="metadata">
                <source src="/api/video/stream/d895a1d5-aded-4ffe-8087-6da01af4ddbc.mp4" type="video/mp4">
                您的浏览器不支持视频播放。
            </video>
        </div>
        <button onclick="testDirectFile()">测试直接文件访问</button>
        <button onclick="testStreamAPI()">测试流媒体API</button>
        <button onclick="clearLog()">清空日志</button>
    </div>

    <div class="container">
        <h2>诊断日志</h2>
        <div id="log" class="log"></div>
    </div>

    <div class="container">
        <h2>问题分析</h2>
        <div class="test-section">
            <h3>可能的问题原因：</h3>
            <ol>
                <li><strong>Content-Type 检测问题</strong>：服务器可能没有正确设置视频的MIME类型</li>
                <li><strong>Range请求处理问题</strong>：视频播放需要支持HTTP Range请求</li>
                <li><strong>文件编码问题</strong>：视频文件可能使用了浏览器不支持的编码格式</li>
                <li><strong>CORS问题</strong>：跨域访问可能被阻止</li>
                <li><strong>文件损坏</strong>：视频文件可能在传输过程中损坏</li>
            </ol>
        </div>
    </div>

    <script>
        const video = document.getElementById('testVideo');
        const log = document.getElementById('log');
        
        function addLog(message, type = 'info') {
            const timestamp = new Date().toLocaleTimeString();
            const className = type === 'error' ? 'error' : 
                            type === 'success' ? 'success' : 
                            type === 'warning' ? 'warning' : 'info';
            log.innerHTML += `<span class="${className}">[${timestamp}] ${message}</span>\n`;
            log.scrollTop = log.scrollHeight;
        }
        
        function clearLog() {
            log.innerHTML = '';
        }
        
        // 视频事件监听
        video.addEventListener('loadstart', () => {
            addLog('开始加载视频', 'info');
        });
        
        video.addEventListener('loadedmetadata', () => {
            addLog(`视频元数据加载成功 - 时长: ${video.duration}秒, 尺寸: ${video.videoWidth}x${video.videoHeight}`, 'success');
        });
        
        video.addEventListener('loadeddata', () => {
            addLog('视频数据加载完成', 'success');
        });
        
        video.addEventListener('canplay', () => {
            addLog('视频可以开始播放', 'success');
        });
        
        video.addEventListener('canplaythrough', () => {
            addLog('视频可以流畅播放', 'success');
        });
        
        video.addEventListener('error', (e) => {
            const error = video.error;
            let errorMsg = '视频播放错误: ';
            
            if (error) {
                switch (error.code) {
                    case 1:
                        errorMsg += 'MEDIA_ERR_ABORTED - 视频加载被中止';
                        break;
                    case 2:
                        errorMsg += 'MEDIA_ERR_NETWORK - 网络错误';
                        break;
                    case 3:
                        errorMsg += 'MEDIA_ERR_DECODE - 视频解码错误';
                        break;
                    case 4:
                        errorMsg += 'MEDIA_ERR_SRC_NOT_SUPPORTED - 视频格式不支持';
                        break;
                    default:
                        errorMsg += `未知错误 (代码: ${error.code})`;
                }
            } else {
                errorMsg += '未知错误';
            }
            
            addLog(errorMsg, 'error');
            addLog(`网络状态: ${video.networkState}, 就绪状态: ${video.readyState}`, 'error');
            addLog(`视频源: ${video.src}`, 'error');
        });
        
        video.addEventListener('stalled', () => {
            addLog('视频加载停滞', 'warning');
        });
        
        video.addEventListener('waiting', () => {
            addLog('视频缓冲中...', 'warning');
        });
        
        // 测试函数
        async function testStreamAPI() {
            addLog('=== 测试流媒体API ===', 'info');
            const videoId = 'd895a1d5-aded-4ffe-8087-6da01af4ddbc.mp4';
            const streamUrl = `/api/video/stream/${videoId}`;
            
            try {
                // 测试HEAD请求
                addLog(`测试HEAD请求: ${streamUrl}`, 'info');
                const headResponse = await fetch(streamUrl, { method: 'HEAD' });
                addLog(`HEAD响应状态: ${headResponse.status} ${headResponse.statusText}`, 
                       headResponse.ok ? 'success' : 'error');
                
                if (headResponse.ok) {
                    const contentType = headResponse.headers.get('Content-Type');
                    const contentLength = headResponse.headers.get('Content-Length');
                    const acceptRanges = headResponse.headers.get('Accept-Ranges');
                    
                    addLog(`Content-Type: ${contentType}`, 'info');
                    addLog(`Content-Length: ${contentLength}`, 'info');
                    addLog(`Accept-Ranges: ${acceptRanges}`, 'info');
                    
                    // 测试Range请求
                    addLog('测试Range请求 (0-1023)', 'info');
                    const rangeResponse = await fetch(streamUrl, {
                        headers: { 'Range': 'bytes=0-1023' }
                    });
                    addLog(`Range响应状态: ${rangeResponse.status} ${rangeResponse.statusText}`, 
                           rangeResponse.status === 206 ? 'success' : 'warning');
                }
                
                // 设置视频源
                video.src = streamUrl;
                addLog(`设置视频源: ${streamUrl}`, 'info');
                
            } catch (error) {
                addLog(`API测试失败: ${error.message}`, 'error');
            }
        }
        
        async function testDirectFile() {
            addLog('=== 测试直接文件访问 ===', 'info');
            const directUrl = 'file:///D:/lan-video/d895a1d5-aded-4ffe-8087-6da01af4ddbc.mp4';
            addLog(`尝试直接访问: ${directUrl}`, 'info');
            addLog('注意: 由于浏览器安全限制，直接文件访问可能失败', 'warning');
            video.src = directUrl;
        }
        
        // 页面加载时自动开始测试
        window.addEventListener('load', () => {
            addLog('=== 视频诊断工具启动 ===', 'info');
            addLog('浏览器信息: ' + navigator.userAgent, 'info');
            addLog('当前时间: ' + new Date().toLocaleString(), 'info');
            
            // 自动测试流媒体API
            setTimeout(() => {
                testStreamAPI();
            }, 1000);
        });
    </script>
</body>
</html>
